// 引入path内置模块并解构赋值
const { resolve } = require('path')
// 生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 将public目录里边的(除了html以外的)文件复制到build目录
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    filename: './js/app.js',
    path: resolve(__dirname, '../build'),
    clean: true,
    publicPath:'/' // 引入app.js的时候，路径就是/js/app.js
  },
  // 模式(生产模式or开发模式)
  mode: 'production',
  // loader
  module: {
    rules: [
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          variable: 'data', // 可以在模板当中使用 data 进行动态渲染. 这个值可以自定义.比如:xxx
          // interpolate: '\\{\\{(.+?)\\}\\}', // 表示使用 {{}} 语法. 我们这里不需要
        },
      },
    ],
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new CopyPlugin({
      patterns: [
        {
          from: 'public',
          to: resolve(__dirname, '../build'),
          globOptions: {
            // htmlplug已经处理过index.html了. copyplug不要再处理index.html,否则无法打包
            ignore: ['**/index.html'],
          },
        },
      ],
    }),
  ],
  resolve: {
    // 尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
    extensions: ['.js', '.json', '.ejs'],
    alias: {
      "@v": resolve(__dirname, '../src/views'),
      "@f":resolve(__dirname,'../src/api')
    },
  },
  performance: {
    hints: false,  // 表示关闭性能提示
  },
}